<template>
  <view class="container">
    <!-- 顶部结果展示 -->
    <view class="result-header">
      <view class="result-icon">🎉</view>
      <text class="result-title">太棒了！</text>
      <text class="result-subtitle">你已完成本组单词学习</text>
    </view>

    <!-- 单词展示 -->
    <view class="word-card">
      <view class="word-main">
        <text class="word-text">{{word.text}}</text>
        <view class="phonetic" @tap="playPronunciation">
          <view class="radio">
            <text class="region">{{ wordType === 1 ? "英" : "美" }}</text>
            <text class="speaker"><img src="@/static/声音.png" alt="#"></text>
          </view>
          <text class="symbol">/{{word.phonetic}}/</text>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-card">
      <!-- 内容显示区域 -->
      <view class="content-area">

        <!-- 近义词 Tab -->
        <view v-if="currentTab === 0" class="tab-pane">
          <view class="word-synonyms" v-if="word.synonyms && word.synonyms.length">
            <view class="synonym-item" v-for="(synonym, index) in word.synonyms" :key="index">
              <text class="synonym-meaning">{{synonym.pos}}</text>
              <text class="synonym-text">{{synonym.hwds.map(item => item.w).join('，') }}</text>
              <text class="synonym-meaning">{{synonym.tran}}</text>
            </view>
          </view>
          <view class="empty-tip" v-else>暂无近义词</view>
        </view>

        <!-- 同义词 Tab -->
        <view v-if="currentTab === 1" class="tab-pane">
          <view class="related-words" v-if="word.relWord && word.relWord.length">
            <view class="related-item" v-for="(related, index) in word.relWord" :key="index">
              <text class="synonym-meaning">{{related.pos}}</text>
              <view class="related-words" v-if="related.words && related.words.length">
                <view class="related-item" v-for="(child, index) in related.words" :key="index">
                  <text class="related-text">{{child.hwd}}</text>
                  <text class="related-meaning">{{child.tran}}</text>
                </view>
              </view>

            </view>
          </view>
          <view class="empty-tip" v-else>暂无同根词</view>
        </view>

        <!-- 例句 Tab -->
        <view v-if="currentTab === 2" class="tab-pane">
          <view class="example-section" v-if="word.examples && word.examples.length">
            <view class="example-item" v-for="(example, index) in word.examples" :key="index">
              <text class="example-text">{{example.sContent }}</text>
              <text class="example-meaning">{{example.sCn}}</text>
            </view>
          </view>
          <view class="empty-tip" v-else>暂无例句</view>
        </view>
      </view>

      <!-- Tab 导航 -->
      <view class="tab-navigation">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index" 
          class="tab-item" 
          :class="{ active: currentTab === index }"
          @tap="switchTab(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 底部按钮 - 保留原有的按钮和逻辑 -->
    <view class="button-group">
      <button class="btn continue" @tap="continueLearn">继续学习</button>
      <button class="btn review" @tap="reviewWrongWords" v-if="hasWrongWords">复习错词</button>
      <button class="btn return" @tap="returnToHome">返回首页</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stats: {
        correctCount: 0,
        accuracy: 0,
        timeUsed: 0,
      },
      word: {
        text: '',
        phonetic: '',
        meaning: '',
        phrases: [],
        examples: [],
        synonyms: [],
        relWord: []
      },
      progress: {
        learned: 0,
        total: 0,
        percentage: 0
      },
      learnedWords: [],
      hasWrongWords: false,
      wordType: 1, // 1为英音，2为美音
      currentTab: 0,
      tabs: [
        { name: '近义词' },
        { name: '同根词' },
        { name: '例句' }
      ]
    }
  },
  onLoad(options) {
    // 获取学习结果数据
    const resultData = uni.getStorageSync('wordLearningResult')
    if (resultData) {
      const data = JSON.parse(resultData)
      // this.stats = data.stats
      // this.progress = data.progress
      // this.learnedWords = data.words
      // this.hasWrongWords = this.learnedWords.some(word => !word.isCorrect)
      
      // 如果有单词数据，设置当前单词
      this.word = data.word
      console.log(1234, data.word.synonyms)
      console.log(5678, data.word.relWord)
      
      // 如果没有相关数据，初始化为空数组
      if (!this.word.synonyms) this.word.synonyms = []
      if (!this.word.relWord) this.word.relWord = []
      
      // 清除缓存数据
      uni.removeStorageSync('wordLearningResult')
    }
  },
  methods: {
    playPronunciation() {
      // 创建音频上下文
      const innerAudioContext = uni.createInnerAudioContext();

      // 获取当前单词
      const word = this.word.text;

      // 设置音频源（1为英音，2为美音）
      innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${word}&type=${this.wordType}`;

      // 监听音频加载完成事件
      innerAudioContext.onCanplay(() => {
        console.log('音频准备就绪');
      });

      // 监听播放错误事件
      innerAudioContext.onError((res) => {
        console.log('播放错误:', res.errMsg);
        uni.showToast({
          title: '音频播放失败',
          icon: 'none'
        });
      });

      // 监听播放完成事件
      innerAudioContext.onEnded(() => {
        console.log('播放结束');
        // 播放完成后销毁实例
        innerAudioContext.destroy();
      });

      // 开始播放
      innerAudioContext.play();

      // 切换发音类型
      this.wordType = this.wordType === 1 ? 2 : 1;
    },
    switchTab(index) {
      this.currentTab = index
    },
    continueLearn() {
      // 获取当前页面参数
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const options = currentPage.$vm.$route.query || {}
      const originalParams = uni.getStorageSync('originalWordParams') || {}

      // 根据来源决定跳转目标
      if (options.from === 'challenge') {
        // 如果是来自挑战模式，返回challenge页面
        uni.setStorageSync('needToggleAnswer', true)
        uni.redirectTo({
          url: `/pages/challenge/challenge`
        })
      }else if (options.from === 'random'){
        uni.setStorageSync('needToggleAnswer', true)
        uni.redirectTo({
          url: `/pages/word-random/word-random`
        })
      }else if (options.from === 'test'){
        uni.setStorageSync('needToggleAnswer', true)
        uni.redirectTo({
          url: `/pages/word-test/word-test`
        })
      }
      else {
        // 如果是来自普通学习模式，返回word页面
        uni.setStorageSync('needToggleAnswer', true)
        uni.redirectTo({
          url: `/pages/word/word?book=${originalParams.book || ''}`
        })
      }
    },
    reviewWrongWords() {
      const wrongWords = this.learnedWords.filter(word => !word.isCorrect)
      uni.setStorageSync('wrongWordsToReview', JSON.stringify(wrongWords))
      uni.redirectTo({
        url: '/pages/word/word?mode=review'
      })
    },
    returnToHome() {
      uni.switchTab({
        url: '/pages/study/study'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #e8f4f8;
  padding: 30rpx;
  box-sizing: border-box;
}

.result-header {
  text-align: center;
  margin-bottom: 30rpx;
  animation: fadeIn 0.5s ease-in-out;
  
  .result-icon {
    font-size: 100rpx;
    margin-bottom: 20rpx;
    animation: bounce 1s ease-in-out;
  }
  
  .result-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .result-subtitle {
    font-size: 26rpx;
    color: #666;
  }
}

.word-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .word-main {
    display: flex;
    flex-direction: column;
    margin-bottom: 30rpx;
    
    .word-text {
      font-size: 60rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 15rpx;
    }
    
    .phonetic {
      display: flex;
      align-items: center;
      
      .radio {
        display: flex;
        align-items: center;
        background-color: #f5f5f5;
        border-radius: 20rpx;
        padding: 6rpx 16rpx;
        margin-right: 15rpx;
        
        .region {
          font-size: 24rpx;
          color: #666;
          margin-right: 8rpx;
        }
        
        .speaker {
          display: flex;
          align-items: center;
          
          img {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }
      
      .symbol {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
  
  .section-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
    font-weight: 500;
  }
  
  .progress-bar {
    height: 10rpx;
    background: #eee;
    border-radius: 5rpx;
    margin-bottom: 15rpx;
    
    .progress {
      height: 100%;
      background: #4CAF50;
      border-radius: 5rpx;
      transition: width 0.3s;
    }
  }
  
  .progress-text {
    font-size: 24rpx;
    color: #666;
  }
  
  .word-item {
    display: flex;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    
    &:last-child {
      border-bottom: none;
    }
    
    .word-info {
      flex: 1;
      
      .word-text {
        font-size: 30rpx;
        color: #333;
        margin-bottom: 5rpx;
        display: block;
        font-weight: 500;
      }
      
      .word-phonetic {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .word-meaning {
      font-size: 26rpx;
      color: #666;
      margin: 0 20rpx;
    }
    
    .word-status {
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #ff4444;
      
      &.correct {
        color: #4CAF50;
      }
    }
  }
}

.content-card {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
}

.content-area {
  padding: 30rpx;
  min-height: 300rpx;
  
  .tab-pane {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .empty-tip {
    text-align: center;
    color: #999;
    font-size: 28rpx;
    padding: 60rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    &:before {
      content: '📝';
      font-size: 60rpx;
      margin-bottom: 20rpx;
      opacity: 0.5;
    }
  }
}

/* Tab 导航样式 - 底部样式 */
.tab-navigation {
  display: flex;
  background: #f5f5f5;
  border-top: 1px solid #eee;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 26rpx;
    color: #666;
    position: relative;
    transition: all 0.3s;
    
    &.active {
      color: #4a90e2;
      font-weight: 500;
      
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4rpx;
        background: #4a90e2;
      }
    }
    
    &:active {
      background: rgba(0, 0, 0, 0.05);
    }
  }
}

.phrase-item, .example-item, .synonym-item, .related-item {
  margin-bottom: 20rpx;
  padding: 15rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
  border-left: 4rpx solid #4a90e2;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .phrase-text, .example-text, .synonym-text, .related-text {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 8rpx;
    display: block;
    font-weight: 500;
  }
  
  .phrase-meaning, .example-meaning, .synonym-meaning, .related-meaning {
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
  }
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 30rpx;
  
  .btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    border: none;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    
    &.continue {
      background: #4a90e2;
      color: white;
      
      &:active {
        background: #3a80d2;
        transform: translateY(2rpx);
      }
    }
    
    &.review {
      background: #4CAF50;
      color: white;
      
      &:active {
        background: #3d9140;
        transform: translateY(2rpx);
      }
    }
    
    &.return {
      background: #f5f5f5;
      color: #666;
      
      &:active {
        background: #e8e8e8;
        transform: translateY(2rpx);
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20rpx);
  }
  60% {
    transform: translateY(-10rpx);
  }
}
</style> 